<template>
  <div style="padding: 20px">
    <el-card>
      <el-row
        type="flex"
        justify="space-between"
        align="center"
      >
        <el-col>
          <el-form
            :model="formInline"
            :inline="true"
          >
            <el-form-item>
              <el-input
                v-model.trim="formInline.subject"
                placeholder="角色名称"
                name="subject"
              />
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                plain
                @click="searchRole"
              >搜索</el-button>
              <el-button @click="formInline.subject = ''">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col>
          <el-row
            type="flex"
            justify="end"
          >
            <el-button
              size="medium"
              type="primary"
              plain
              @click="showRoleList"
            >创建角色</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-table
        :data="list"
        border
        :cell-style="{'text-align':'center'}"
        :header-cell-style="{'text-align':'center',background:'#fafafa',color: '#646464'}"
      >
        <el-table-column
          label="角色ID"
          prop="id"
          width="140"
        />
        <el-table-column
          label="角色名称"
          prop="role_name"
        />
        <el-table-column
          label="角色标识"
          prop="identify"
        />
        <el-table-column label="角色描述" prop="description" />
        <el-table-column label="添加时间" prop="created_at" />
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button
              type="primary"
              icon="el-icon-edit"
              circle
              @click="editList(row.id)"
            />
            <el-button
              type="danger"
              icon="el-icon-delete"
              circle
              @click="del(row.id)"
            />
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="height: 100px" align="middle">
        <el-pagination
          background
          :current-page="is_show.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="is_show.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
    </el-card>
    <RoleList v-if="dialogVisible" ref="role_list" :data-list="data_list" :checkedkeys.sync="checkedkeys" :dialog-visible.sync="dialogVisible" />
  </div>
</template>

<script>
import { getRoleManagementData, getPermissionData, getRoleDataAccordingToId, deleteRoleAccordingToId, findRoleData } from '@/api/permission'
import RoleList from '../components/role_list.vue'
export default {
  name: 'Role',
  components: {
    RoleList
  },
  data() {
    return {
      formInline: {
        subject: '',
        state: ''
      },
      is_show: {
        page: 1,
        limit: 10
      },
      list: [], // 表格数据
      data_list: [], // 权限数据
      value1: true, //
      currentPage4: 4,
      total: null,
      pagesize: null,
      checkedkeys: [],
      dialogVisible: false
    }
  },
  created() {
    this.getRoleManagementData()
    this.getPermissionData()
  },
  methods: {
    async getRoleManagementData() {
      try {
        const { data } = await getRoleManagementData(this.is_show)
        // 保存数据
        this.list = data.list
        // 保存数据条数
        this.total = data.total
        this.pagesize = this.is_show.limit
      } catch (err) {
        console.log(err)
      }
    },
    async getPermissionData() {
      try {
        const { data } = await getPermissionData()
        this.data_list = data
      } catch (err) {
        console.log(err)
      }
    },
    handleSizeChange(val) {
      this.is_show.limit = val
      this.formInline.subject ? this.searchRole() : this.getRoleManagementData()
    },
    handleCurrentChange(val) {
      // 将当前页码赋值给当前的最新页码
      this.is_show.page = val
      this.formInline.subject ? this.searchRole() : this.getRoleManagementData()
    },
    // 新增事件
    showRoleList() {
      // this.$refs.role_list.dialogVisible = true
      this.dialogVisible = true
    },
    // 编辑事件
    async editList(id) {
      const { data } = await getRoleDataAccordingToId(id)
      const _data = this.dataProcessing(data)
      this.dialogVisible = true
      this.$nextTick(() => {
        this.$refs.role_list.form_role_list = {
          role_name: _data.role_name,
          identify: _data.identify,
          description: _data.description,
          authlist: [],
          id
        }
        this.checkedkeys = _data.authlist
      })
    },
    dataProcessing(data) {
      const form_role_list = {
        role_name: '',
        identify: '',
        description: '',
        authlist: []
      }
      form_role_list.role_name = data.role_name
      form_role_list.identify = data.identify
      form_role_list.description = data.description
      const arr = []
      this.digui(data.authlist, arr)
      form_role_list.authlist = [...arr]
      return form_role_list
    },
    digui(data, arr) {
      data.forEach(item => {
        arr.push(item.id)
        if (item.children && item.children.length) {
          this.digui(item.children, arr)
        }
      })
      return arr
    },
    // 删除事件
    async del(id) {
      try {
        await this.$confirm('宁确认要删除吗')
        // 如果删除的是最后一页且只有最后一条数据
        const lastPage = Math.ceil(this.total / this.is_show.limit) // 最后一页
        if (lastPage !== 1 && lastPage === this.is_show.page && this.list.length === 1) {
          this.is_show.page--
        }
        await deleteRoleAccordingToId(id)
        this.getRoleManagementData()
      } catch (err) {
        console.log(err)
      }
    },
    // 搜索事件
    async searchRole() {
      if (!this.formInline.subject) {
        return
      }
      try {
        const { data } = await findRoleData({
          role_name: this.formInline.subject,
          page: 1,
          limit: 10
        })
        this.total = data.total
        this.list = data.list
      } catch (err) {
        console.log(err)
      }
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-input--small .el-input__inner {
  width: 215px;
  padding-right: 30px
}
::v-deep .el-table__body {
  padding: 0!important;
  height: 30px;
  line-height: 30px!important;
}
::v-deep .el-table tr{
    height: 57px;
  }
::v-deep [data-v-40add2e2] .el-table tr {
  height: 48px;
}
::v-deep .el-link--primary{
  position: relative;
  color: #66b1ff;
  cursor: pointer;
}

</style>

